<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>qx-plugins</title>
	<link href="../source/css/qx-base.css" rel="stylesheet">
	<link href="../source/css/qx-plugins.css" rel="stylesheet">
	<script type="text/javascript" src="../lib/mootools-core-1.4.5.js"></script>
	<script type="text/javascript" src="../lib/mootools-more-1.4.0.1.js"></script>
	<script type="text/javascript" src="../source/js/qx-base.js"></script>
	<script type="text/javascript" src="../source/js/qx-plugins.js"></script>
	<style type="text/css">
		.container{
			width:1170px;
			margin:18px auto;
		}
	</style>
	<script type="text/javascript">
		var modal1 = function(){
			var m = new qx.Modal('确认', '删除后将无法恢复！确认删除记录？', function(o){
				o.close();
			});
		}
		var progress1 = function(){
			var p = new qx.Progress('加载条，3秒后自动关闭');
			setTimeout(function(){
				p.close();
			}, 3000);
		}
		var progress2 = function(){
			var p = new qx.Progress(null, 3000);
			setTimeout(function(){
				p.close();
			}, 5000);
		}
	</script>
</head>
<body>
<div class="container">
<h1>模式对话框</h1>
<hr>
<button class="btn" onclick="modal1()">显示</button>
<br><br>

<h1>加载条</h1>
<hr>
<button class="btn" onclick="progress1()">加载条</button>
<button class="btn" onclick="progress2()">动态加载条</button>
</div>
</body>
</html>
